<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/register.css}" />
    <script th:src="@{./js/JQuery2.1.4.js}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var height=$(document).height();
            $('.main').css('height',height);
        })
    </script>
</head>
<body>
<div class="main">
    <div class="main0">
        <div class="main_left">
            <img th:src="@{/images/gms.jpg}" class="theimg"/>
        </div>
        <div class="main_right">
            <div class="main_r_up">
                <img th:src="@{/images/user1.png}"/>
                <div class="pp">注册</div>
            </div>
            <div class="sub"><p>已有账号？<a th:href="@{../login}"><span class="blue">立即登录</span></a></p></div>
            <div><p th:text="${msg}"></p></div>
            <form id="registerForm" name="user" th:action="@{registerUser}" method="post">
                <div class="txt">
                    <span style="letter-spacing:8px;">手机号:</span>
                    <input type="text" pattern="^\d{11}$" class="txtphone" required="required" name="aNumber" id="aNumber" title="请正确输入手机号"/>
                </div>
                <div class="txt">
                    <span style="letter-spacing:8px;">用户名:</span>
                    <input type="text"  pattern="^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$" class="txtphone" required="required" name="userName" id="userName" title="用户名长度为1-14"/>
                </div>
                <div class="txt">
                    <span style="letter-spacing:8px;">登录密码:</span>
                    <input type="password" pattern="^(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$" class="txtphone" required="required" name="passWord" id="passWord" title="密码长度在6-12"/>
                </div>
                <div class="txt">
                    <span style="letter-spacing:8px;">再次输入密码:</span>
                    <input type="password" class="txtphone" required="required" name="passWord2" id="passWord2"/>
                </div>
                <div class="txt">
                    <span style=" float:left;letter-spacing:8px;">性别:</span>
                    <select name="sex">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div class="txt">
                    <span style="letter-spacing:8px;">学院:</span>
                    <input type="text" pattern="^[\u4e00-\u9fa5]{2,20}" class="txtphone" required="required" name="academy" id="academy" title="请正确输入学院"/>
                </div>
                <div class="txt">
                    <span style=" float:left;letter-spacing:8px;">身份:</span>
                    <select name="identity">
                        <option value="学生">学生</option>
                        <option value="教职工">教职工</option>
                    </select>
                </div>
                <div class="txt">
                    <span style="letter-spacing:8px;">学号/教工号:</span>
                    <input type="text" pattern="^\d{12}$"class="txtphone" required="required" name="number" id="number" title="12位数字"/>
                </div>
                <div>
                    <button type="submit" class="xiayibu">
                        注册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer0">
        <div class="footer_l">使用条款 | 隐私保护</div>
        <div class="footer_r">© 2021 广东海洋大学体育馆管理系统</div>
    </div>
</div>

</body>
<script type="text/javascript" th:src="@{/js/jquery/lib/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/dist/jquery.validate.js}"></script>
<script>
    $().ready(function() {
        $("#registerForm").validate({
            rules: {
                passWord: {
                    required: true,
                },
                passWord2: {
                    required: true,
                    equalTo: "#passWord"
                }

            },
            messages: {
                nawpassword1: {
                    required: "请输入密码",
                },
                nawpassword2: {
                    required: "请输入密码",
                    equalTo: "请再次输入相同的值"
                }
            }
        });
    });
</script>
</html>